<template>
	<div class="canvasBox">
		<canvas ref="canvas"></canvas>
		<div class="canvasConfig" v-if="view !== null">
			关卡名称：
			<input type="text" v-model="view.Name" />
			<br />内边距：
			<input type="text" v-model.number="view.Padding" />
			<br />蜂巢维度：
			<input type="text" v-model.number="view.Dimensional" />
			<br />根据三视图解图：
			<input
				type="checkBox"
				:checked="view.Order"
				@input="view.Order = $event.target.checked"
			/>
			<br />线条颜色：
			<input type="text" v-model="view.Color" />
			<br />线条粗细：
			<input type="text" v-model.number="view.LineWidth" />
			<br />悬停线条颜色：
			<input type="text" v-model="view.HoverColor" />
			<br />悬停线条粗细：
			<input type="text" v-model.number="view.HoverLineWidth" />
			<br />激活线条颜色：
			<input type="text" v-model="view.ActiveColor" />
			<br />激活线条粗细：
			<input type="text" v-model.number="view.ActiveLineWidth" />
			<br />虚线线条颜色：
			<input type="text" v-model="view.DottedColor" />
			<br />虚线线条粗细：
			<input type="text" v-model.number="view.DottedLineWidth" />
			<br />
			<button @click="makeMap">创建地图</button><br />
			<textarea
				class="mapString"
				wrap="off"
				v-model="view.MapString"
			></textarea>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import GameMakeView from "@/paint/view/GameMakeView";
import { GameLevel } from "@/paint/Setting";

/** 创建关卡页面 */
@Component({
	name: "Make"
})
export default class MakePage extends Vue {
	private view: GameMakeView | null = null;

	private get canvas(): HTMLCanvasElement {
		return this.$refs.canvas as HTMLCanvasElement;
	}

	private mounted() {
		this.$nextTick(() => {
			const view = (this.view = new GameMakeView(this.canvas));
			view.Run();
		});
	}

	private makeMap() {
		if (this.view !== null) {
			GameLevel.push(this.view.MapData);
			this.$router.push({ name: "Choose" });
		}
	}

	private destroyed() {
		this.view && this.view.Stop();
	}
}
</script>

<style>
.canvasBox {
	display: flex;
}
.canvasBox canvas {
	width: 50%;
	height: 100%;
	flex: 1;
}
.mapString {
	width: 400px;
	height: 400px;
}
.canvasConfig {
	margin-top: 20px;
}
</style>
